﻿@page "/components/buttongroup"
@page "/components/MudButtonGroup"

<DocsPage>
    <DocsPageHeader Title="Button Group" Component="@nameof(MudButtonGroup)">
        <Description>
            The <ApiTypeLink TypeName="@nameof(MudButtonGroup)" /> component can be used to group related <ApiTypeLink TypeName="@nameof(MudButton)" /> components.
            <MudText>See also: <MudLink Href="/components/togglegroup">Toggle Group</MudLink></MudText>
        </Description>
    </DocsPageHeader>
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="Basic Button Group">
            </SectionHeader>
            <SectionContent Code="@nameof(ButtonGroupBasicExample)" ShowCode="false">
                <ButtonGroupBasicExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Vertical Orientation">
                <Description>With <CodeInline>Vertical="true"</CodeInline> the buttons are displayed vertically.</Description>
            </SectionHeader>
            <SectionContent Code="@nameof(ButtonGroupVerticalExample)" ShowCode="false">
                <ButtonGroupVerticalExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Sizes and Colors">
            </SectionHeader>
            <SectionContent Code="@nameof(ButtonGroupSizesColorsExample)" ShowCode="false">
                <ButtonGroupSizesColorsExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Icon Buttons">
                <Description><CodeInline>MudButtonGroup</CodeInline> can also make use of <CodeInline>MudIconButton</CodeInline> and <CodeInline>MudToggleIconButton</CodeInline>.</Description>
            </SectionHeader>
            <SectionContent Code="@nameof(ButtonGroupIconButtonExample)">
                <ButtonGroupIconButtonExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Split Button">
                <Description>A <CodeInline>MudMenu</CodeInline> can be used to create a split button.</Description>
            </SectionHeader>
            <SectionContent ShowCode="false" Code="@nameof(ButtonGroupSplitButtonExample)">
                <ButtonGroupSplitButtonExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Drop Shadow">
                <Description>With <CodeInline>DropShadow="false"</CodeInline> the drop shadow of button groups with <CodeInline>Variant="Variant.Filled"</CodeInline> is removed.</Description>
            </SectionHeader>
            <SectionContent ShowCode="false" Code="@nameof(ButtonGroupDropShadowExample)">
                <ButtonGroupDropShadowExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Custom Styles">
                <Description>With <CodeInline>OverrideStyles="false"</CodeInline> the <CodeInline>MudButtonGroup</CodeInline> no longer overrides the styles of the individual buttons.</Description>
            </SectionHeader>
            <SectionContent Code="@nameof(ButtonGroupCustomStylesExample)">
                <ButtonGroupCustomStylesExample />
            </SectionContent>
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>
